<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../css/common.css" media="all">
  <style>
    .usr-info-avatar {
      display: flex;
      /* align-items: center; */
    }
    .usr-info-avatar img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      border-radius: 50%;
    }
    .layui-font-16 {
      font-size: 14px;
      font-weight: bold;
    }
    .usr-info-data {
      padding: 26px 18px;
      background: linear-gradient(45deg,#7464ff,#2262fd 49%,#1c91ff);
      background-image: linear-gradient(45deg, rgb(116, 100, 255), rgb(34, 98, 253) 49%, rgb(28, 145, 255));
      color: #FFF;
      border-radius: 10px;
    }
    .data-analyze-title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
      margin: 20px 0 10px;
    }
    .data-analyze-title .data-analyze-title-time {
      font-size: 14px;
      color: #A6A6B7;
      margin-left: 10px
    }
    .data-analyze-content {
      padding: 16px 10px;
      margin: 16px 10px 0;
      background-color: #F7F7F8;
      border-radius: 2px;
      color: #212C4E;
      font-size: 16px;
      font-weight: bold;
    }
    .data-analyze-content .data-analyze-content-title {
      font-size: 12px;
      color: #A9A9BB;
      margin-bottom: 8px;
    }
    .data-analyze-content .data-analyze-content-big-money {
      font-size: 20px;
      color: #014EFC;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .data-analyze-content-bottom>div {
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="layui-fluid">
    <p style="color: #8C8E9B; margin-bottom: 10px;" id="welcomText">你好，XXXX</p>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-body" style="padding: 26px 18px;">
            <div class="usr-info-avatar">
              <img id="usrAvatar" src="../../img/mch_avatar_default.png">
              <div>
                <div id="usrName" class="layui-font-16 layui-font-black"></div>
                <div>
                  <i class="layui-icon layui-icon-cellphone"></i>
                  <span class="layui-font-gray" id="mobile"></span>
                </div>
                <div>
                  <i class="layui-icon layui-icon-vercode"></i>
                  <span class="layui-font-gray" id="email"></span>
                </div>
              </div>
            </div>
          </div>
        </div>   
      </div>
      <div class="layui-col-md6">
        <div class="layui-card usr-info-data">
          <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
              <div class="layui-col-md4">
                <p>总资产（元）</p>
                <p style="font-size: 20px; margin-top: 8px;">10344.15</p>
              </div>
              <div class="layui-col-md4">
                <p>可用资产（元）</p>
                <p style="font-size: 20px; margin-top: 8px;">10344.15</p>
              </div>
              <div class="layui-col-md4">
                <p>在途资产（元）</p>
                <p style="font-size: 20px; margin-top: 8px;">10344.15</p>
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>
    <div class="layui-row data-analyze-title">
      <span>数据统计</span>
      <span class="data-analyze-title-time">统计时间:<span id="statDate"></span> 至 <span id="endDate"></span></span>
    </div>
    <div class="layui-row">
      <div class="layui-card" style="padding-bottom: 16px;">
        <div class="layui-tab layui-tab-brief layadmin-latestData" lay-filter="data-analyze-tab">
          <ul class="layui-tab-title">
            <li class="layui-this" lay-id="one">近31日</li>
            <li class="">本周</li>
            <li class="">昨日</li>
          </ul>
        </div>
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md6">
            <div class="data-analyze-content">
              <div>
                <p class="data-analyze-content-title">总订单金额（元）</p>
                <p class="data-analyze-content-big-money" id="amount"></p>
              </div>
              <div class="data-analyze-content-bottom">
                <div>
                  <p class="data-analyze-content-title">实收金额（元）</p>
                  <p id="pay_price"></p>
                </div>
                <div style="margin-left: 30px;">
                  <p class="data-analyze-content-title">补贴金额（元）</p>
                  <p id="fee_give"></p>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="data-analyze-content">
              <div class="data-analyze-content-card">
                <p class="data-analyze-content-title">交易总笔数（笔）</p>
                <p class="data-analyze-content-big-money" id="count_id"></p>
              </div>
              <div class="data-analyze-content-bottom">
                <div>
                  <p class="data-analyze-content-title">退款交易笔数（笔）</p>
                  <p id="count_refund_amount"></p>
                </div>
                <div style="margin-left: 30px;">
                  <p class="data-analyze-content-title">补贴订单笔数（笔）</p>
                  <p id="count_fee_give"></p>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="data-analyze-content" style="margin-top: 0;">
              <div class="data-analyze-content-card">
                <p class="data-analyze-content-title">客单价（元）</p>
                <p id="per_customer_price"></p>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="data-analyze-content" style="margin-top: 0;">
              <div class="data-analyze-content-card">
                <p class="data-analyze-content-title">总交易手续费（元）</p>
                <p id="fee"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-row layui-col-space15" style="background-color: #FFF; margin: 10px 0;">
      <div class="layui-col-md6">
        <p style="margin-left: 10px;margin-top: 10px;">交易金额统计</p>
        <div id="chart-money" style="height:400px;"></div>
      </div>
      <div class="layui-col-md6">
        <p style="margin-left: 10px;margin-top: 10px;">交易笔数统计</p>
        <div id="chart-count" style="height:400px;"></div>
      </div>
    </div>
  </div>
  <script src="../../layuiadmin/layui/layui.js?t=1"></script>
  <script src="../../js/common.js"></script>
  <script src="../../js/echarts.js"></script>
  <script src="../../js/dayjs.min.js"></script>
  <script src="../../js/dayjs.zh-cn.js"></script>

  <script>
	  dayjs.locale('zh-cn')
    layui.config({
      base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'element', 'laytpl'], function () {
      var table = layui.table,
        $ = layui.$,
        form = layui.form,
        laytpl = layui.laytpl,
        element = layui.element,
        admin = layui.admin;

      inituserdata();

      var queryData = {
        statDate: '',
        endDate: '',
        memberid: ''
      }
      var statTime = " 00:00:00", endTime = ' 23:59:59'
      initQueryDate(0)
      queryDataChart()
      
      function initQueryDate(type) {
        if (type === 0) { // 近31
          queryData.statDate = dayjs().subtract(31, 'day').format('YYYY-MM-DD') + statTime
          queryData.endDate = dayjs().format('YYYY-MM-DD') + endTime
        } else if (type === 1) { // 本周
          queryData.statDate = dayjs().startOf('week').format('YYYY-MM-DD') + statTime
          queryData.endDate = dayjs().endOf('week').format('YYYY-MM-DD') + endTime
        } else {
          var yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
          queryData.statDate = yesterday + statTime
          queryData.endDate = yesterday + endTime
        }
        $('#statDate').text(queryData.statDate)
        $('#endDate').text(queryData.endDate)
        queryDataAnalyze()
      }

      //一些事件触发
      element.on('tab(data-analyze-tab)', function(data){
        initQueryDate(data.index)
      });

      function inituserdata() {
					$.get(server.queryuser, {}, function(res, status) {
						if (status == 'success') {
							if (res.code == 0) {
								var data = res.user_info.data
								$('#welcomText').text('您好，' + data.name ? data.name : data.mobile)
								$('#usrName').text(data.name ? data.name : data.mobile)
								$('#mobile').text(data.mobile)
								$('#email').text(data.email)
                if (data.head_img) {
                  $('#usrAvatar').attr('src', data.head_img)
                }

								// show_web(data.type)

							} else {
								location.replace('login.html')
								layer.msg(res.msg);
							}
							closeloading();
						} else {
							closeloading();
							location.replace('login.html')
							layer.msg('服务器连接错误');
						}
					});
				}

      function queryDataAnalyze() {
        $.get(server.sys_collections_record_home_analyze, queryData, function (res, status) {
          if (status == 'success') {
            if (res.code == 0) {
              var data = res.collections_record.data;
              $('#amount').text(formatMoney(data.amount))
              $('#pay_price').text(formatMoney(data.pay_price))
              $('#fee_give').text(formatMoney(data.fee_give))
              $('#count_id').text(formatMoney(data.count_id, '', 0))
              $('#count_refund_amount').text(formatMoney(data.count_refund_amount, '', 0))
              $('#count_fee_give').text(formatMoney(data.count_fee_give, '', 0))
              $('#fee').text(formatMoney(data.fee))
              var per_customer_price = data.amount/data.count_id
              $('#per_customer_price').text(formatMoney(per_customer_price || 0, '', 2))
            } else {
              layer.msg(res.msg);
            }
            closeloading();
          } else {
            layer.msg('服务器连接错误');
          }
        });
      }

      function queryDataChart() {
        $.get(server.sys_collections_record_home_chart, queryData, function (res, status) {
          if (status == 'success') {
            if (res.code == 0) {
              var data = res.collections_record.data;
              initChartMoney(data)
              initChartCount(data)
            } else {
              layer.msg(res.msg);
            }
            closeloading();
          } else {
            layer.msg('服务器连接错误');
          }
        });
      }

      function initChartMoney(record) {
        var chartMoney = echarts.init(document.getElementById('chart-money'));
        // 指定图表的配置项和数据
        var xAxisData = [], seriesData = []
        $.each(record, function(index, item) {
          xAxisData.push(item.show_date)
          seriesData.push(item.amount)
        })
        var chartMoneyOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              areaStyle: {},
              itemStyle : { normal: {label : {show: true}}}
            }
          ],
          grid: [
            {
              left: '5%',
              right: '5',
              top: 40
            }
          ]
        };
        console.log(chartMoneyOption)
        chartMoney.setOption(chartMoneyOption);
      }

      function initChartCount(record) {
        var chartCount = echarts.init(document.getElementById('chart-count'));
        // 指定图表的配置项和数据
        var xAxisData = [], seriesData = []
        $.each(record, function(index, item) {
          xAxisData.push(item.show_date)
          seriesData.push(item.count_id)
        })
        var chartCountOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              areaStyle: {},
              itemStyle : { normal: {label : {show: true}}}
            }
          ],
          grid: [
            {
              left: '5%',
              right: '5',
              top: 40
            }
          ]
        };
        console.log(chartCountOption)
        chartCount.setOption(chartCountOption);
      }

    });
  </script>
</body>

</html>